<script setup lang="ts">
//基础组件 - 选择
//https://www.smartisan.com/service/#/insurance/info/broken
import { ref, computed } from "vue";
import SelectYes from "@/assets/select_yes.png";
import SelectNo from "@/assets/select_no.png";

//准备数据
const data = [
  {
    id: 1,
    active: false,
    title: "坚果 R2 手机延长保修服务 149 元/年",
    meat: "折算后仅需 0.41 元/天",
  },
  {
    id: 2,
    active: false,
    title: "Smartisan TNT go 延长保修服务 149 元/年",
    meat: "折算后仅需 0.41 元/天",
  },
  {
    id: 3,
    active: false,
    title: "坚果 Pro 3 手机延长保修服务 149 元/年",
    meat: "折算后仅需 0.41 元/天",
  },
];

//准备点击方法
const active = ref(0);
const clickActive = (num:number) => {
  active.value = num;
};

//计算数学简化判断
const sum = computed(() => {
  return (num:number) => {
    if (active.value === num) {
      return true;
    } else {
      return false;
    }
  };
});
</script>
<template>
  <ul class="insurance-list">
    <li
      class="insurance-item"
      v-for="item in data"
      :key="item.id"
      :class="sum(item.id) ? 'active' : ''"
      @click="clickActive(item.id)"
    >
      <span class="name">{{ item.title }}</span>
      <span class="price">{{ item.meat }}</span>
      <img :src="sum(item.id) ? SelectYes : SelectNo" class="icon" />
    </li>
  </ul>
</template>
<style scoped lang="less">
.insurance-list {
  margin-top: 20px;
  .insurance-item {
    width: 660px;
    height: 60px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    margin: 0 auto;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    padding: 0 24px;
    position: relative;
    cursor: pointer;
    .name {
      color: #000;
    }
    .price {
      color: #d34c42;
    }
    .icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 18px;
      height: 18px;
    }
  }
  .insurance-item.active {
    border-color: #698ce8;
    font-weight: 600;
  }
}
</style>
